<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">
<link rel=help href="https://github.com/openui/open-ui/issues/1026">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<select style="appearance:base-select">
  <option></option>
</select>

<script>
const option = document.querySelector('option');
for (const text of ['', 'i']) {
  for (const writingMode of ['horizontal-tb', 'vertical-lr', 'vertical-rl']) {
    promise_test(async () => {
      document.documentElement.style.writingMode = writingMode;
      option.textContent = text;
      await new Promise(requestAnimationFrame);

      const select = document.querySelector('select');
      const buttonRect = select.getBoundingClientRect();
      assert_greater_than_equal(buttonRect.width, 24,
        'Button width must be at least 24 pixels.');
      assert_greater_than_equal(buttonRect.height, 24,
        'Button height must be at least 24 pixels.');

      await test_driver.bless();
      select.showPicker();
      const optionRect = document.querySelector('option').getBoundingClientRect();
      assert_greater_than_equal(optionRect.width, 24,
        'Option width must be at least 24 pixels.');
      assert_greater_than_equal(optionRect.height, 24,
        'Option height must be at least 24 pixels.');
    }, `${writingMode} "${text}": Select with appearance:base-select should have targets for pointer inputs be at least 24x24 CSS pixels.`);
  }
}
</script>
